<div class="shrink-0 w-full h-28" (click)="close()"></div>

<div class="w-full flex-1 flex justify-start rounded-t-3xl bg-gray-50 overflow-auto">

  <div class="flex flex-col gap-4 w-96 p-4 sticky top-0">
    <div class="w-full text-center text-lg font-semibold">{{ 'PAC.Copilot.Examples.RetrievalTesting' | translate: {Default: 'Retrieval Testing'} }}</div>
    <div>
      <label>{{ 'PAC.Xpert.Command' | translate: {Default: 'Command'} }}</label>
      <ngm-select [selectOptions]="commands()" [(ngModel)]="command" />
    </div>

    <ngm-slider-input [label]=" 'PAC.Knowledgebase.SimilarityThreshold' | translate: {Default: 'Similarity Threshold'}"
        [(ngModel)]="score" 
        [min]="0" [max]="1" [step]="0.01">
      <span class="font-notoColorEmoji"
        [matTooltip]="'PAC.Knowledgebase.SimilarityThresholdInfo' | translate: {Default: 'If the similarity between the query and the chunk is less than this threshold, the chunk will be filtered out.'}"
        matTooltipPosition="above"
        >💡</span>
    </ngm-slider-input>

    <ngm-slider-input [label]="'PAC.Knowledgebase.TopK' | translate: {Default: 'Top Count'}"
      [(ngModel)]="topK"
      [min]="1" [max]="100" [step]="1" />

    <div>
      <label>{{ 'PAC.Xpert.Input' | translate: {Default: 'Input'} }}</label>
      <div class="flex items-center gap-2">
        <input class="w-full max-w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none h-9"
          [(ngModel)]="search">
      
        <button type="button" class="btn btn-primary px-4 py-1 rounded-lg whitespace-nowrap" (click)="retrieve()">
          {{ 'PAC.Xpert.Retrieval' | translate: {Default: 'Retrieval'} }}
        </button>
      </div>
    </div>
  </div>

  <div class="flex-1 min-h-full flex flex-col items-stretch gap-4 p-4">
    <div>
      <span class="px-2 py-1 rounded-lg bg-gray-50">{{items().length}} {{ 'PAC.Xpert.Examples' | translate: {Default: 'Examples'} }}</span>
    </div>
    @for (doc of items(); track doc) {
      <div class="relative flex flex-col rounded-xl border border-solid border-transparent hover:border-divider-regular hover:shadow-lg hover:bg-gray-100">
        <div class="hover:bg-gray-200 rounded-t-xl px-4 pt-2 line-clamp-3" [title]="doc.pageContent">
          {{doc.pageContent}}
        </div>
        <div class="w-full border-b border-solid border-divider-deep"></div>
        <div class="hover:bg-gray-200 px-4 line-clamp-6 whitespace-pre-wrap" [title]="doc.metadata.output">
          {{doc.metadata.output}}
        </div>

        <div class="w-full flex justify-start items-center gap-1 p-1 rounded-b-xl bg-components-panel-bg">
          @if (doc.metadata.provider) {
            <span class="px-2 py-0 rounded-md text-sm bg-gray-100">{{doc.metadata.provider}}</span>
          }
          @if (doc.metadata.model) {
            <span class="px-2 py-0 rounded-md text-sm bg-gray-100">{{doc.metadata.model}}</span>
          }
        </div>
      </div>
    }
  </div>

</div>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full"></ngm-spin>
}